<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 vue.js 文件 -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <div v-for="item in books"> {{item.name + ' ' + item.price + '元'}} </div>
        <div>总价格： {{FullName + '元'}} </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                message: "Hello Vue",
                books: [
                    { id: 110, name: 'Unix编程1', price: 119 },
                    { id: 111, name: 'Unix编程2', price: 105 },
                    { id: 112, name: 'Unix编程3', price: 110 },
                    { id: 113, name: 'Unix编程4', price: 99 },
                    { id: 114, name: 'Unix编程5', price: 97 },
                ]
            },
            // computed 计算属性
            // 可以直接使用属性名调用，不需要加括号
            computed: {
                FullName: function () {
                    let result = 0;
                    for (let i = 0; i < this.books.length; i++) {
                        result = result + this.books[i].price;
                    }
                    return result;
                }
            },
        });
    </script>
</body>

</html>